<template>
	<view class="order_main">
		<view class="body-view">
			<!-- 使用scroll-view实现tabs滑动切换 状态-->
			<scroll-view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent"
				:scroll-with-animation="true">
				<view class="" style="display: flex;justify-content: space-around;">
					<view class="menu-topic-view" v-for="(item,index) in tabsList" :id="'tabNum'+(index+1)" :key="index"
						@click="swichMenu(index)">
						<view :class="currentTab==index? 'menu-topic-act' : ''">
							<text class="menu-topic-text">{{item.name}}</text>
							<view class="menu-topic-bottom">
								<view class="menu-topic-bottom-color"></view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 内容 -->
			<swiper class="content-wrapper" :current="currentTab" :disable-touch="true" @change="handleTabChange">
				<swiper-item class="swiper-item">
					<KnowledgeBooks ref="manualListInstance"></KnowledgeBooks>
				</swiper-item>
				<swiper-item class="swiper-item">
					<KnowledgeVideo ref="videoListInstance"></KnowledgeVideo>
				</swiper-item>
				<swiper-item class="swiper-item">
					<KnowledgeFault></KnowledgeFault>
				</swiper-item>
			</swiper>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="add_main">
				<p class="text_top_popup">故障查询<uni-icons class="icon" color="#aaa" @click="popup.close()" size="20"
						type="closeempty"></uni-icons></p>
				<uni-easyinput suffixIcon="scan" placeholderStyle="font-size:28rpx;" v-model="code" placeholder="请输入条码"
					@iconClick="iconClick"></uni-easyinput>
				<button class="onlogout" @click="addCode"><span>确定</span></button>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { nextTick, ref } from "vue";
	import { onUnload, onLoad } from '@dcloudio/uni-app'
	import KnowledgeBooks from './components/KnowledgeBooks.vue'
	import KnowledgeFault from './components/KnowledgeFault.vue'
	import KnowledgeVideo from './components/KnowledgeVideo.vue'
	import _ from "lodash";
	
	// 说明书列表组件实例
	const manualListInstance = ref<InstanceType<typeof KnowledgeBooks> | null>(null)
	
	// 视频列表组件实例
	const videoListInstance = ref<InstanceType<typeof KnowledgeVideo> | null>(null)
	
	const tabsList = ref([
		{ status: 1, name: '电子说明书' },
		{ status: 2, name: '在线视频' },
		{ status: 3, name: '故障类型' },
	])

	const currentTab = ref(0)//当前标题index
	const tabCurrent = ref('tabNum0')
	// Tab切换内容
	async function swichMenu(index : number) {
		// if (index == currentTab.value) return
		// uni.showToast({
		// 	title: "正在维护中，敬请期待...",
		// 	duration: 2000,
		// 	icon: "none"
		// })
		currentTab.value = index
		tabCurrent.value = 'tabNum' + index

	}
	
	/**
	 * 获取列表
	 */
	const getList = () => {
		nextTick(() => {			
			if (currentTab.value === 0) {
				if (manualListInstance.value) {
					manualListInstance.value.getList()
				}
			}
			
			if (currentTab.value === 1) {
				if (videoListInstance.value) {
					videoListInstance.value.getList()
				}
			}
		})
	}
	
	/**
	 * 标签更新事件
	 */
	const handleTabChange = () => {
		getList()
	}
	
	const showTip = () => {
		uni.showModal({
			title: '在哪里查条码/型号',
			showCancel: false,
			confirmText: '确认',
			confirmColor: '#007cff',
			content: '网购订单，产品外包装，产品铭牌、表面或底部，产品说明书等位置'
		})
	}
	const popup = ref()
	const code = ref('')
	const showCode = () => {
		code.value = ''
		popup.value.open()
	}
	const addCode = _.debounce(() => {
		if (!code.value.trim()) {
			uni.showToast({
				title: '请先输入条码！',
				icon: 'none'
			})
			return
		}
		// uni.showLoading({
		// 	title: "加载中...",
		// })
		// apiCode.getGoodsTypeBySNCode(code.value).then(res => {
		// 	uni.hideLoading()
		// 	if (res.code == 20000) {
		// 		if (res.data.row.length > 0) {
		// 			uni.navigateTo({
		// 				url: '/pages_network/fee/standard?id=' + res.data.row[0].id
		// 			})
		// 			popup.value.close()
		// 		}else{
		// 			uni.showModal({
		// 				title: '提示',
		// 				showCancel: false,
		// 				confirmText: '确认',
		// 				confirmColor: '#007cff',
		// 				content: '该商品暂无收费标准！'
		// 			})
		// 		}
		// 	}
		// })
	}, 800)
	// 调起客户端扫码界面，扫码成功后返回对应的结果。
	const iconClick = () => {
		uni.scanCode({
			scanType: ['qrCode', 'barCode'],//扫码类型
			success: async function (res) {
				code.value = res.result
				addCode()
			},
			fail: (err) => {
				// #ifdef H5
				uni.showToast({
					icon: 'none',
					title: '设备不支持此功能',
					duration: 3000
				})
				// #endif

			}
		})


	}
	const goStandard = () => {
		uni.navigateTo({
			url: '/pages_user/home/fault/faulttype'
		})
	}
	onUnload(() => {
		uni.hideLoading()
	})

	onLoad(() => {
		getList()
	})
</script>

<style lang="scss" scoped>
	.order_main {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		width: 100vw;
		background-color: #fafafa;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.add_main {
			background-color: #fff;
			border-radius: 10rpx;
			width: 80vw;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 34rpx;
			box-sizing: border-box;

			.text_top_popup {
				text-align: center;
				font-size: 28rpx;
				padding: 0rpx 0 20rpx;
				width: 100%;
				position: relative;

				.icon {
					position: absolute;
					right: 0rpx;
					font-weight: 500;
				}
			}

			.onlogout {
				font-size: 28rpx;
				margin: 30rpx 20rpx 0;
				height: 80rpx;
				border-radius: 50rpx;
				line-height: 80rpx;
				width: 100%;
				color: #fff;
				background-color: #007cff;
			}

			:deep(.is-input-border) {
				// border-radius: 50rpx !important;
				background-color: rgba(243, 244, 248, 1) !important;
				padding: 10rpx;
				margin-top: 20rpx;
				border: none;
				height: 80rpx !important;
				line-height: 80rpx;
				font-size: 28rpx
			}
		}

		:deep(.uni-searchbar__cancel) {
			color: #FFFFFF;
		}

		.body-view {
			display: flex;
			flex: 1;
			flex-direction: column;
			position: relative;

			::-webkit-scrollbar {
				width: 0;
				height: 0;
				background-color: transparent;
				display: none;
			}

			.top-menu-view {
				display: flex;
				white-space: nowrap;
				width: 100%;
				background-color: #FFFFFF;
				height: 86rpx;
				line-height: 86rpx;
				border-bottom: 1rpx solid #d8dbe6;

				.menu-topic-view {
					display: inline-block;
					white-space: nowrap;
					height: 100%;
					position: relative;
					padding: 0rpx 10rpx;

					.menu-topic-text {
						font-size: 28rpx;
						color: #303133;
						margin: 0 20rpx;
						position: relative;
						z-index: 2;
						border-radius: 10rpx;
						font-weight: bold;
					}

					.menu-topic-bottom {
						position: absolute;
						bottom: 4rpx;
						left: 0;
						right: 0;
						margin: 0 40rpx;

						.menu-topic-bottom-color {
							width: 100%;
							height: 4rpx;
						}
					}

					.menu-topic-act {
						.menu-topic-text {
							font-weight: 700;
							color: #007cff;
						}

						.menu-topic-bottom {
							display: flex;
							justify-content: center;
						}

						.menu-topic-bottom-color {
							background: #007cff;
						}
					}
				}
			}

			.content-wrapper {
				width: 100%;
				flex: 1;
				height: 0;

				.swiper-item {
					width: 100%;
					flex: 1;

					.scroll_content {
						height: 100%;
						box-sizing: border-box;

						.scroll-view_list {
							height: 100%;

							.pag_bottom {
								font-size: 28rpx;
								padding: 24rpx 30rpx;
								box-sizing: border-box;
								display: flex;
								flex-direction: column;
								row-gap: 30rpx;

								.item_box {
									display: flex;
									align-items: center;
									justify-content: space-between;
									background-color: #fff;
									padding: 30rpx;
									box-sizing: border-box;

									.item_box_left {
										display: flex;
										align-items: center;
										column-gap: 24rpx;

										.item_text_box {
											display: flex;
											flex-direction: column;
											row-gap: 10rpx;

											.title {
												font-weight: bold;
												font-size: 28rpx;
											}

											.tip {
												color: #777;
												font-size: 22rpx;
											}

											.l_tip {
												text-decoration: underline;
												color: #007cff;
												font-size: 22rpx;
												display: flex;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>